<template>
  <div>
    <h2>任务状态</h2>
    {{  queueStore.queueData }}
    <div v-if="queueStore.queueData.taskStatus">
      <p>当前状态: {{ queueStore.queueData.taskStatus }}</p>
      <p>处理结果: {{ queueStore.queueData.taskResult }}</p>
    </div>
    <button @click="sendTask">发送任务</button>
  </div>
</template>

<script setup>
import { useQueueStore } from '@/stores/queue'
import { onMounted } from 'vue'
import { QWebChannel } from 'qwebchannel';

const queueStore = useQueueStore()

let queueSqlite = null;

// 定义全局函数用于更新状态
window.updateQueueState = (key, value) => {
  try {
    console.log('更新状态:', key, value);
    queueStore.updateQueueData(key, value);
  } catch (e) {
    console.error('更新状态时出错:', e);
  }
};

onMounted(() => {
  if (window.qt && window.qt.webChannelTransport) {
    new QWebChannel(window.qt.webChannelTransport, function (channel) {
      queueSqlite = channel.objects.queueSqlite;
      console.log("queueSqlite", queueSqlite)
    });
  }
});

// 这个函数会通过 QWebChannel 调用 Python 端代码
const sendTask = () => {  
  // 调用 Python 端的 send_message 方法
 if (queueSqlite && queueSqlite.send_message) {
  // 发从 message 以及 pinia store 名称
  queueSqlite.send_message(
    JSON.stringify({
      "content": {"num": 1}, 
      "destination": "test"
    }), 
    "taskStatus"
  )
 }
}

// 当 Python 端执行回调并更新状态时，页面会自动显示最新状态
</script>